import Vue from 'vue';
// import { debounce, throttle } from 'lodash'

// 图片懒加载如何实现？
// 图片的加载是一个异步的过程

function imgLoad(src) {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.onload = () => {
      resolve(true)
    }
    img.onerror = () => {
      reject(false)
    }
    img.src = src;
  })
}

/**
 *
 *  bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
    componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    unbind：只调用一次，指令与元素解绑时调用。
* @description
*/

// vue全局自定义指令 inserted
// 1. 延时加载 async
// 2. 占位图加载  src data-src
// 3. 可视区域  getBoundingClientRect().top
let flag = true;
const myScroll = async (el, data) => {
  // console.log(1, 'el')
  let imgSrc = el.dataset.src;
  let sH = document.documentElement.clientHeight
  let topH = el.getBoundingClientRect().top;
  console.log(topH, sH, '------------------')
  if (flag && topH <= sH) {
    flag = false
    console.log('我在可是区域内部了')
    // let imgStatus = await imgLoad(imgSrc)
    // if (imgStatus) {
    console.log('我要加载图片了')
    el.src = data.value
    flag = true
    // }
  }
}

function throttle(fn, time = 500) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null;
    }, time)
  }
}

Vue.directive('real-img', {
  inserted: async function (el, data) {
    // let imgSrc = el.dataset.src;
    // let sH = document.documentElement.clientHeight
    // let topH = el.getBoundingClientRect().top;


    // // if (flag && topH <= sH) {
    // // flag = false
    // // console.log('我在可是区域内部了')
    // let imgStatus = await imgLoad(imgSrc)
    // if (imgStatus) {
    //   console.log('我要加载图片了')
    //   el.src = data.value
    //   // flag = true
    // }
    // }
    myScroll(el, data)
    window.addEventListener('scroll', () => myScroll(el, data))
  },
  unbind() {
    // window.removeEventListener('scroll', myScroll)
  }
})
